
<template>
    <div id="login">
        <div class="login-box">
            <h1>以物易物</h1>
            <span class="mini-title">--让不用的物品产生价值</span>
            <el-form
                :label-position="labelPosition"
                label-width="80px"
                :model="formLabelAlign"
            >
                <el-form-item required>
                    <el-input
                        v-model="formLabelAlign.email"
                        prefix-icon="el-icon-user"
                        placeholder="请输入员工账号"
                    ></el-input>
                </el-form-item>
                <el-form-item required>
                    <el-input
                        v-model="formLabelAlign.pwd"
                        prefix-icon="el-icon-lock"
                        placeholder="请输入员工密码"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="reg" type="text" class="reg-btn">注册</el-button>
                    <el-button @click="login" type="primary" class="login-btn">登录</el-button>
                    <!-- <el-button @click="reg" type="info" class="reg-btn">注册</el-button> -->
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import {reg, login} from '../network/request';
export default {
    name: "login",
    data() {
        return {
            labelPosition: "right",
            formLabelAlign: {
                email: "",
                pwd: "",
            },
        };
    },
    methods: {
        login() {
            const params = {
                method: 'post',
                url: '/login',
                data: this.formLabelAlign
            };
            login(params).then(res => {
                sessionStorage.setItem('token', res.content);
                this.$router.push('/home');
            })
        },
        reg() {
            this.$router.push('/reg');
        }
    }
};
</script>

<style lang="scss">
#login {
    height: 100vh;
    background: url("../assets/img/login-banner.jpg") no-repeat;
    background-size: cover;
    position: relative;
    .login-box {
        padding: 50px;
        border-radius: 10px;
        background: #ffffff;
        width: 350px; 
        height: 320px;
        position: absolute;
        left: 50%;
        top: 40%;
        text-align: center;
        transform: translateX(-50%);
        box-shadow: 2px 2px #ffffff;
        .el-form {
            margin-top: 50px;
            margin-left: -50px;
        }
        .login-btn {
            width: 100%;
            margin-top: 0;
            margin-left: 0;
        }
        .mini-title,
        h1 {
            color: #5089ff;
        }
        .mini-title {
            font-size: 14px;
            margin-top: 15px;
            display: inline-block;
        }
        .reg-btn {
            margin-left: 0;
            width: 100%;
        }
    }
}
</style>
